<template>
	<view class="comment-box" :style="{height: commentBoxHeight}">
		<view class="mask" @tap="hideCommentBox"></view>
		<view class="solid">
			<view class="textarea-wrap">
				<textarea class="textarea" auto-height="true" maxlength="200" :focus="focus"></textarea>
			</view>
			<view class="other">
				<view class="btn-advance-mode">高级模式</view>
			</view>
			<view><button type="primary" class="btn-submit">发布</button></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.comment-box {
	z-index: 999;
	position: fixed;
	width: 100%;
	display: flex;
	left: 0;
	bottom: 0;
	flex-direction: column;
	justify-content: space-between;
	.mask {
		transition: background-color 2s;
		flex-grow: 1;
		background-color: rgba($color: #000000, $alpha: 0.2);
	}
	.solid {
		background-color: #fff;
		.textarea-wrap {
			padding: 30upx;
			.textarea {
				width: 100%;
				min-height: 300upx;
				border: 1px solid #ddd;
				padding: 20upx;
				box-sizing: border-box;
			}
		}
		.other {
			padding: 30upx;
			text-align: right;
			.btn-advance-mode {
				display: inline;
				padding: 8upx 20upx;
				background-color: #ddd;
			}
		}
		.btn-submit {
			border-radius: 0;
		}
	}
}
</style>
